<template>
  <div class="container">
    <!-- <van-swipe class="my-swiper" :autoplay="3000" indicator-color="#B47C2D">
      <van-swipe-item v-for="i in 4" :key="i">
        <img v-lazy="img" />
      </van-swipe-item>
    </van-swipe>-->
    <van-search
      v-model="keyword"
      placeholder="请输入搜索关键词"
      @search="getExhibitList"
      @clear="getExhibitList"
    />
    <van-dropdown-menu active-color="#B47C2D">
      <van-dropdown-item v-model="cg_id" :options="cg" />
      <van-dropdown-item v-model="exhibit_id" :options="exhitions" />
    </van-dropdown-menu>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getExhibitList">
      <div class="content">
        <div class="item" v-for="(item,index) in list" :key="index">
          <router-link :to="{path:'/exhibit/detail',query:{id:item.exhibit_id}}">
            <div class="img">
              <img v-lazy="item.exhibit_list_img" alt />
            </div>
            <div class="inner">
              <h3>{{item.exhibit_name}}</h3>
              <p>{{item.exhibition_name}} {{item.floor_name}}</p>
              <p>
                {{item.g_name}}
                <span>
                  <i class="iconfont iconyanjing"></i>
                  {{item.look_num}}
                </span>
              </p>
            </div>
          </router-link>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img:
        "https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png",
      cg_id: 0,
      exhibit_id: 0,
      keyword: "",
      cg: [{ text: "全部场馆", value: 0 }],
      exhitions: [{ text: "全部展厅", value: 0 }],
      list: [],
      loading: false,
      finished: false,
      page: 1,
      limit: 10
    };
  },
  watch: {
    cg_id() {
      this.page = 1;
      this.getExhibitList();
    },
    exhibit_id() {
      this.page = 1;
      this.getExhibitList();
    },
    keyword() {
      this.page = 1;
    }
  },
  methods: {
    getList() {
      this.$api.getIntroList().then(res => {
        console.log(res);
        if (res.status == 1) {
          res.data.map(item => {
            this.cg.push({ text: item.title, value: item.id });
          });
        }
      });
    },
    getEx() {
      this.$api.getExhibition_list().then(res => {
        res.data.map(item => {
          this.exhitions.push({ text: item.title, value: item.exhibition_id });
        });
      });
    },
    getExhibitList() {
      this.$api
        .exhibit_list(
          this.exhibit_id,
          this.g_id,
          this.keyword,
          this.page,
          this.limit
        )
        .then(res => {
          this.loading = false;
          if (this.page == 1) {
            this.list = res.data.data;
          } else {
            this.list = [...this.list, res.data.data];
          }

          if (res.data.data.length >= this.limit) {
            this.page = this.page + 1;
          }
          if (res.data.data.length < this.limit) {
            this.finished = true;
          }
        });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    }
  },
  mounted() {
    this.getList();
    this.getEx();
    this.getExhibitList();
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background: #edeaed;
  .my-swiper {
    height: 152px;
    img {
      width: 100%;
      height: 152px;
    }
    /deep/ .van-swipe__indicator--active {
      width: 20px;
      border-radius: 5px;
    }
  }
  .content {
    overflow: hidden;
    padding: 10px;
    .item {
      width: 172px;
      background: #fff;
      border-radius: 3px;
      margin: 0px 0px 10px;
      float: left;
      overflow: hidden;
      margin-right: 10px;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .img {
        width: 172px;
        height: 172px;
        overflow: hidden;
        img {
          width: 100%;
          display: block;
        }
      }
      .inner {
        padding: 10px 15px 0;
        h3 {
          color: #353535;
          font-size: 15px;
          margin-bottom: 12px;
        }
        p {
          font-size: 12px;
          line-height: 14px;
          color: #7b7c7d;
          overflow: hidden;
          margin-bottom: 9px;
          span {
            float: right;
            line-height: 18px;
            margin-top: -4px;
            i {
              font-size: 18px;
              display: inline-block;
              margin-right: 3px;
            }
          }
        }
      }
    }
  }
}
</style>